<template>
	<view class="center mar-15" @click="$emit('click')">
		<view class="record-btn">
			<view class="btn-text big" :class="bc" v-if="size=='big'">{{content}}</view>
			<view class="btn-text middle" :class="bc" v-if="size=='middle'">{{content}}</view>
			<view class="btn-text small" :class="bc" v-if="size=='small'">{{content}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			content: {
				type: String,
				default: "确认"
			},
			size: {
				type: String,
				default: "middle"
			},
			bc: {
				type: String,
				default: "bg",
			},
		},
		data() {
			return {

			}
		},
		methods: {}
	}
</script>

<style scoped>
	.record-btn {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;

		.bg {
			background: linear-gradient(139deg, #76E1E7 0%, #40CFE6 100%);
		}

		.bg-0 {
			background: #eba242;
		}

		.bg-1 {
			background: #0cbd30;
		}

		.btn-text {

			border-radius: 166px 166px 166px 166px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			text-transform: none;
			border-radius: 16rpx;
		}

		.big {
			font-size: 25px;
			padding: 5px 35px;
		}

		.middle {
			font-size: 15px;
			padding: 5px 25px;
		}

		.small {
			font-size: 12px;
			padding: 1px 15px;
		}

	}
</style>